<template>
  <div class="detail">
    <div v-if="details">
      <navbar>
        <div slot="center">商品详情</div>
      </navbar>
      <div class="pic">
        <img
          :src="details.goods.cover_url"
          alt=""
        >
      </div>
      <van-panel class="my-panel">
        <div class="des">
          <h3>{{details.goods.title}}</h3>
          <!-- <p class="detailname">php/《细说php》第四版</p> -->
          <p class="detailname">{{details.goods.description}}</p>
          <p class="tag">
            <van-tag
              plain
              type="danger"
            >新书</van-tag>
            <van-tag
              plain
              type="danger"
            >推荐</van-tag>
          </p>
          <p class="price">
            <span class="new">¥{{details.goods.price}}</span>
            <span class="old">库存 {{details.goods.stock}}</span>
          </p>
          <p class="number">
            购买数量 :
            <van-stepper v-model="value" />
          </p>
          <p class="btn-group">
            <van-button
              class="pay"
              type="primary"
              size="small"
            >
              立即购买</van-button>
            <van-button
              type="danger"
              size="small"
              @click="addCart"
            >
              加入购物车</van-button>
          </p>
        </div>
      </van-panel>
      <van-tabs v-model="active">
        <!-- 概述 -->
        <van-tab title="概述">
          <div>
            <img
              :src="details.goods.cover_url"
              alt=""
            >
            <img
              :src="details.goods.cover_url"
              alt=""
            >
            <img
              :src="details.goods.cover_url"
              alt=""
            >
          </div>
        </van-tab>
        <!-- 评论 -->
        <van-tab title="热评">
          <van-card
            v-for="(item,index) in details.goods.comments"
            :key="index"
          >
            <template #desc>
              <p style="padding-top:10px;">{{item.content}}</p>
              <p style="padding-top:15px;">
                <span>价格 : {{details.goods.price}}</span>
                <span style="padding-left:15px">库存 : {{details.goods.stock}}</span>
              </p>
            </template>
            <template #thumb>
              <div>
                <img
                  :src="item.user.avatar_url"
                  alt=""
                  style="width:50px;height:50px"
                >
                <div>{{item.user.name}}</div>
              </div>
            </template>
            <template #title>
              <van-rate
                v-model="asd"
                readonly
              />
            </template>
            <template>
              <p>
                {{item.rate}}
              </p>
            </template>
            <template #price>
              添加时间：{{item.created_at}}
            </template>
          </van-card>
        </van-tab>
        <!-- 相关图书 -->
        <van-tab
          title="相关图书"
          class="about"
        >
          <div
            class="aboutlist"
            v-for="(item,index) in details.like_goods"
            :key="index"
          >
            <div class="img-box">
              <img
                :src="item.cover_url"
                alt=""
              >
            </div>
            <h4 class="title">{{item.title}}</h4>
            <div class="info">
              <div class="price">
                <span class="new">¥{{item.price}}</span>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="foot"></div>
    </div>
  </div>

</template>
<script>
import Navbar from 'components/common/navbar/Navbar.vue'
import axios from 'axios'
const instance = axios.create({
  baseURL: 'https://api.shop.eduwork.cn',
})
export default {
  data() {
    return {
      id: null,
      activeKey: 0,
      active: 2,
      value: 1,
      asd: 5,
      details: null
    }
  },
  components: {
    Navbar
  },
  created() {
    //1.保存传入的id
    this.id = this.$route.params.id
    this.sp()
  },
  methods: {
    addCart() {
      let shop = this.details.goods
<<<<<<< HEAD
      // console.log(shop);
      let goodsinfo = {
=======
      console.log(shop);
      let obj = {
>>>>>>> detail
        id: shop.id,
        shopName: shop.title,
        count: this.value,
        price: shop.price,
        stock: shop.stock,
        src: shop.cover_url
      }
<<<<<<< HEAD
      this.$store.commit({
        type: 'addCart',
        goodsinfo
      })

    },
    async sp() {
      const res = await instance.get('/api/goods/' + this.id)
      // console.log(res.data);
=======
      this.$store.state.shop = obj
    },
    async sp() {
      const res = await instance.get('/api/goods/' + this.id)
      console.log(res.data);
>>>>>>> detail
      this.details = res.data
    }
  }
}
</script>
<style lang="less" scoped>
.detail {
  padding: 10px 10px;
  .pic {
    width: 100%;
  }
  .my-panel {
    border: 1px solid #eee;
    margin-bottom: 10px;
    .des {
      margin-left: 16px;
      font-size: 12px;
      h3 {
        text-align: left;
        padding: 10px;
      }
      .detailname {
        text-align: left;
        padding: 5px;
      }
      .tag {
        text-align: left;
        padding: 5px;
      }
      .price {
        display: flex;
        .new {
          margin-right: 20px;
          color: red;
        }
        .old {
          margin-left: 230px;
        }
      }
      .number {
        display: flex;
        align-items: center;
      }
      .btn-group {
        text-align: right;
        padding: 5px;
        .pay {
          margin-right: 20px;
        }
      }
    }
  }
  .about {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .aboutlist {
      width: 48%;
      border: 1px solid #ddd;
      padding: 5px;
      margin-top: 10px;
    }
  }
  .foot {
    width: 100%;
    height: 50px;
  }
}
</style>
